<template>
  <header class="header-box">
    <div class="title">数据采集</div>
    <div class="right_flex">
      <div>{{time}}</div>
      <!-- <div>历史访问</div>
            <div class="fun-item"><img :src="require('../../assets/image/user_03.png')" alt=""> admin</div>
            <div>退出</div> -->
    </div>
  </header>
</template>
<script>
export default {
  data() {
    return {
      time: "",
    };
  },
  created(){
      setInterval(() => {
        this.getNowTime()
      }, 1000);
  },
  methods: {
    getNowTime() {
      var now = new Date();
      var year = now.getFullYear(); //得到年份
      var month = now.getMonth(); //得到月份
      var date = now.getDate(); //得到日期
      var hour = now.getHours()>10?now.getHours():'0'+now.getHours(); 
      var min = now.getMinutes()>10?now.getMinutes():'0'+now.getMinutes(); 
      var mill = now.getSeconds()>10?now.getSeconds():'0'+now.getSeconds(); 
      month = month + 1;

      this.time = `${year}年${month}月${date}日 ${hour}:${min}:${mill}`;
    },

  },
};
</script>
<style lang="stylus" scoped>
.header-box {
  height: 49px;
  background: #262c4a;
  box-shadow: 1px 2px 5px 0px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  padding-right: 20px;
  color: #fff;
  font-size: 14px;
  padding: 0 20px;
}

.header-box {
  justify-content: space-between;
}

.header-box .right_flex div {
  margin-left: 20px;
}

.header-box .right_flex {
  display: flex;
}

.fun-item {
  display: flex;
  align-items: center;
}

.fun-item img {
  width: 16px;
  height: 16px;
  margin-right: 7px;
}
</style>